<template>
  <div class="header-view">
    <div class="svg-title-view">
      <img src="../../assets/img/ytfx/name.png" />
    </div>
    <div class="header-view-popover">
      <el-popover
        placement="bottom"
        width="30%"
        v-model="value"
        trigger="click"
      >
        <el-date-picker
          :picker-options="pickerOptions"
          v-model="value1"
          popper-class="popper-class"
          size="mini"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        >
        </el-date-picker>
        <el-button
          size="mini"
          style="margin-left: 10px"
          type="primary"
          @click="onSubmit()"
          >查询</el-button
        >
        <div slot="reference" class="sx-view" :style="setBtnStyle()">筛 选</div>
      </el-popover>
    </div>
    <div class="header-view-time">
      <p class="time">{{ time }}</p>
      <p class="week">{{ week }}</p>
    </div>
  </div>
</template>

<script>
// import {
//   queryCommodityMoneyTop10,
//   queryCommodityNumTop10,
//   queryTurnoverMoneyList,
//   queryTurnoverMoney,
//   queryCommodityNumTop10Stock,
//   queryStoreMoneyList,
//   queryRepairCarNum,
//   queryCarPartsNum,
//   queryCarPartsMoneyDayList,
//   queryRepairAllMoney,
//   queryCarTypeNumList,
//   queryGasolineTypeMoneyDayList,
//   queryGasAllMoney,
//   queryGasolineMoneyList,
//   queryGasolineMoneyDayList,
// } from "@/utils/api";
export default {
  name: "HeadView",
  mixins: [],
  props: {},
  data() {
    return {
      value1: [],
      value: false,
      time: "",
      week: "",
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate0 = minDate.getTime();
          if (maxDate) {
            this.choiceDate0 = "";
          }
        },
        disabledDate: (time) => {
          let choiceDateTime = new Date(this.choiceDate0).getTime();
          const minTime = new Date(choiceDateTime).setMonth(
            new Date(choiceDateTime).getMonth() - 1
          );
          const maxTime = new Date(choiceDateTime).setMonth(
            new Date(choiceDateTime).getMonth() + 1
          );
          const min = minTime;
          const newDate =
            new Date(new Date().toLocaleDateString()).getTime() +
            24 * 60 * 60 * 1000 -
            1;
          const max = newDate < maxTime ? newDate : maxTime;
          //如果已经选中一个日期 则 返回 该日期前后一个月时间可选
          if (this.choiceDate0) {
            return time.getTime() < min || time.getTime() > max;
          }
          //若一个日期也没选中 则 返回 当前日期以前日期可选
          return time.getTime() > newDate;
        },
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    setInterval(this.updateTime, 1000);
    // this.init();
  },
  methods: {
    updateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, "0");
      const day = now.getDate().toString().padStart(2, "0");
      const hours = now.getHours().toString().padStart(2, "0");
      const minutes = now.getMinutes().toString().padStart(2, "0");
      const seconds = now.getSeconds().toString().padStart(2, "0");
      const day2 = now.getDay();
      const weeks = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      const week = weeks[day2];
      const currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      this.time = currentTime;
      this.week = week;
    },
    // // 初始化
    // init() {
    //   let dateVal = ["2024-04-21 00:00:00", "2024-04-28 00:00:00"];
    //   if (this.value1 && this.value1.length > 0) {
    //     dateVal[0] = this.value1[0] + "  00:00:00";
    //     dateVal[1] = this.value1[1] + "  00:00:00";
    //   }
    //   // this.$emit("setLoading",{shop:true,catering:true,service:true,gasStation:true})
    //   let that = this;
    //   // 商超部-单品销量排行榜
    //   this.getQueryCommodityNumTop10({
    //     type: 2,
    //     startDate: dateVal[0],
    //     endDate: dateVal[1],
    //   });
    //   // 商超部-单品销售额排行榜
    //   this.getQueryCommodityMoneyTop10({
    //     type: 2,
    //     startDate: dateVal[0],
    //     endDate: dateVal[1],
    //   });
    //   // 商超部-销售额统计
    //   this.getQueryTurnoverMoneyList({
    //     type: 2,
    //     startDate: dateVal[0],
    //     endDate: dateVal[1],
    //   });
    //   // 商超部-销售额对比
    //   this.getQueryTurnoverMoney({
    //     type: 2,
    //     startDate: dateVal[0],
    //     endDate: dateVal[1],
    //   });
    //   // 商超部-库存
    //   this.getQueryCommodityNumTop10Stock({
    //     startDate: dateVal[0],
    //     endDate: dateVal[1],
    //   });
    //   // 餐饮部-食品销售额排行榜
    //   this.getQueryCommodityMoneyTop10({
    //     type: 1,
    //     startDate: dateVal[0],
    //     endDate: dateVal[1],
    //   });
    //   // 餐饮部-餐厅销售额排行榜
    //   this.getQueryStoreMoneyList({
    //     type: 1,
    //     startDate: dateVal[0],
    //     endDate: dateVal[1],
    //   });
    //   // 餐饮部-销售额统计
    //   this.getQueryTurnoverMoneyList({
    //     type: 1,
    //     startDate: dateVal[0],
    //     endDate: dateVal[1],
    //   });
    //   // 餐饮部-销售额对比
    //   this.getQueryTurnoverMoney({
    //     type: 1,
    //     startDate: dateVal[0],
    //     endDate: dateVal[1],
    //   });
    //   // 维修部-入场车辆类型
    //   this.getQueryRepairCarNum({
    //     startDate: dateVal[0],
    //     endDate: dateVal[1],
    //   });
    //   // 维修部-库存
    //   this.getQueryCarPartsNum();
    //   // 维修部-销售额统计
    //   this.getQueryCarPartsMoneyDayList({
    //     startDate: dateVal[0],
    //     endDate: dateVal[1],
    //   });
    //   // 维修部-销售额对比
    //   this.getQueryRepairAllMoney({
    //     startDate: dateVal[0],
    //     endDate: dateVal[1],
    //   });
    //   // 加油站-入场车辆类型
    //   this.getQueryCarTypeNumList({
    //     startDate: dateVal[0],
    //     endDate: dateVal[1],
    //   });
    //   // 加油站-各类销售
    //   this.getQueryGasolineTypeMoneyDayList({
    //     startDate: dateVal[0],
    //     endDate: dateVal[1],
    //   });
    //   // 加油站-销售额对比
    //   this.getQueryGasAllMoney({
    //     startDate: dateVal[0],
    //     endDate: dateVal[1],
    //   });
    //   // 加油站-收入来源
    //   this.getQueryGasolineMoneyList({
    //     startDate: dateVal[0],
    //     endDate: dateVal[1],
    //   });
    //   // 加油站-销售趋势
    //   this.getQueryGasolineMoneyDayList({
    //     startDate: dateVal[0],
    //     endDate: dateVal[1],
    //   });
    // },
    // 查询
    onSubmit() {
      this.value = false;
      // this.init();
    },
    // //获取销售额排名（餐饮、商超）
    // getQueryCommodityMoneyTop10(obj) {
    //   queryCommodityMoneyTop10(obj).then((res) => {
    //     if (obj.type == 2) {
    //       // 给商超传值
    //       this.$emit("setShopData", { type: "单品销售额排行榜", data: res });
    //     }
    //     if (obj.type == 1) {
    //       // 餐饮部-食品销售额排行榜
    //       this.$emit("setCatering", { type: "食品销售额排行榜", data: res });
    //     }
    //   });
    // },
    // // 获取销售量排行（餐饮、商超）
    // getQueryCommodityNumTop10(obj) {
    //   queryCommodityNumTop10(obj).then((res) => {
    //     if (obj.type == 2) {
    //       // 给商超传值
    //       this.$emit("setShopData", { type: "单品销量排行榜", data: res });
    //     }
    //   });
    // },
    // // 销售统计（商超、餐饮）
    // getQueryTurnoverMoneyList(obj) {
    //   queryTurnoverMoneyList(obj).then((res) => {
    //     if (obj.type == 2) {
    //       this.$emit("setShopData", { type: "销售额统计", data: res });
    //     }
    //     if (obj.type == 1) {
    //       this.$emit("setCatering", { type: "销售额统计", data: res });
    //     }
    //   });
    // },
    // // 当期销售额（商超、餐饮）
    // getQueryTurnoverMoney(obj) {
    //   queryTurnoverMoney(obj).then((res) => {
    //     if (obj.type == 2) {
    //       this.$emit("setShopData", { type: "销售额对比", data: res });
    //     }
    //     if (obj.type == 1) {
    //       this.$emit("setCatering", { type: "销售额对比", data: res });
    //     }
    //   });
    // },
    // // 商超部-单品销售量top10库存
    // getQueryCommodityNumTop10Stock(obj) {
    //   queryCommodityNumTop10Stock(obj).then((res) => {
    //     this.$emit("setShopData", { type: "库存", data: res });
    //   });
    // },
    // // 餐厅销售额排行榜
    // getQueryStoreMoneyList(obj) {
    //   queryStoreMoneyList(obj).then((res) => {
    //     this.$emit("setCatering", { type: "餐厅销售额排行榜", data: res });
    //   });
    // },
    // // 维修部-入场车辆类型
    // getQueryRepairCarNum(obj) {
    //   queryRepairCarNum(obj).then((res) => {
    //     this.$emit("setService", { type: "入站车辆类型", data: res });
    //   });
    // },
    // // 维修部-库存
    // getQueryCarPartsNum() {
    //   queryCarPartsNum().then((res) => {
    //     this.$emit("setService", { type: "配件库存统计", data: res });
    //   });
    // },
    // // 维修部-销售统计
    // getQueryCarPartsMoneyDayList(obj) {
    //   queryCarPartsMoneyDayList(obj).then((res) => {
    //     this.$emit("setService", { type: "销售额统计", data: res });
    //   });
    // },
    // // 维修部-销售额对比
    // getQueryRepairAllMoney(obj) {
    //   queryRepairAllMoney(obj).then((res) => {
    //     this.$emit("setService", { type: "销售额对比", data: res });
    //   });
    // },
    // // 加油站-入场车辆类型
    // getQueryCarTypeNumList(obj) {
    //   queryCarTypeNumList(obj).then((res) => {
    //     this.$emit("setGasStation", { type: "入站车辆类型", data: res });
    //   });
    // },
    // // 加油站-各类销售
    // getQueryGasolineTypeMoneyDayList(obj) {
    //   queryGasolineTypeMoneyDayList(obj).then((res) => {
    //     this.$emit("setGasStation", { type: "各类销售", data: res });
    //   });
    // },
    // // 加油站-销售额对比
    // getQueryGasAllMoney(obj) {
    //   queryGasAllMoney(obj).then((res) => {
    //     this.$emit("setGasStation", { type: "销售额对比", data: res });
    //   });
    // },
    // // 加油站-收入来源
    // getQueryGasolineMoneyList(obj) {
    //   queryGasolineMoneyList(obj).then((res) => {
    //     console.info("queryGasolineMoneyList === ", res);
    //     this.$emit("setGasStation", { type: "收入来源", data: res });
    //   });
    // },
    // // 加油站-销售趋势
    // getQueryGasolineMoneyDayList(obj) {
    //   queryGasolineMoneyDayList(obj).then((res) => {
    //     this.$emit("setGasStation", { type: "销售趋势", data: res });
    //   });
    // },
    // 设置按钮样式
    setBtnStyle() {
      if (this.value) {
        return {
          backgroundImage: `url(${require("../../assets/img/ytfx/btn2.png")})`,
        };
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.header-view {
  height: 107px;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  color: #fff;
  .svg-title-view {
    height: 107px;
    width: 1265px;
    position: relative;
    display: flex;
    justify-content: center;
    background-image: url("../../assets/img/ytfx/title.png");
    background-size: cover; /* 图片覆盖整个元素，保持图片的宽高比 */
    background-repeat: no-repeat; /* 不重复图片 */
    color: #fff;
    img {
      height: 60px;
      width: 338px;
    }
  }
  .header-view-popover {
    position: absolute;
    right: 10px;
    bottom: 10px;
    .sx-view {
      width: 105px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      background-image: url("../../assets/img/ytfx/btn1.png");
      background-size: cover; /* 图片覆盖整个元素，保持图片的宽高比 */
      background-repeat: no-repeat; /* 不重复图片 */
    }
    .sx-view:hover {
      background-image: url("../../assets/img/ytfx/btn2.png");
    }
  }
  .header-view-time {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 20px;
    p {
      color: #0e5cc6;
      background: linear-gradient(180deg, #fff, #0e5cc6);
      -webkit-background-clip: text;
      color: transparent;
      font-weight: bold;
    }
    .time {
      font-size: 20px;
    }
    .week {
      font-size: 22px;
      margin-top: 10px;
      font-style: italic;
    }
  }
}
</style>
<style lang="scss">
.el-popover {
  .el-range-editor--mini.el-input__inner{
    color: #fff;
    background: none;
    i,span,input{
      color: #fff;
      background: none;
    }
  }

}
</style>
